<template>
  <transition name="dialog-slide" @after-leave="delELe">
    <div v-show="show" ref="alter" :class="'alter-message alter-message-'+type">{{ msg }}</div>
  </transition>
</template>

<script>
export default {
  name: 'UiNotice',
  props: {
    msg: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: 'info'
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted: function() {
    const _this = this
    this.show = true
    setTimeout(function() {
      _this.show = false
    }, 3000)
  },
  methods: {
    delELe: function() {
      this.$el.remove()
    }
  }
}
</script>

<style scoped lang="less">
  .alter-message{
    position: fixed;
    z-index: 999;
    background-color: rgba(51, 51, 51, 0.8);
    font-size: 12px;
    line-height: 20px;
    color: #f2f2f2;
    border-radius: 4px;
    padding: 5px 10px;
    left: 50%;
    transform: translateX(-50%);
    top: 40px;
  }
  .alter-message-success{
    color: #67c23a;
    background-color: #f0f9eb;
    border: 1px solid rgba(103, 194, 58, 0.5);
  }
  .alter-message-warning{
    color: #e6a23c;
    background: #fdf6ec;
    border: 1px solid rgba(230, 162, 60, 0.5);
  }
  .alter-message-error{
    color: #f56c6c;
    background: #fef0f0;
    border: 1px solid rgba(245, 108, 108, 0.5);
  }
  .dialog-slide-enter-active, .dialog-slide-leave-active {
    transition: all .5s;
  }
  .dialog-slide-leave-to,.dialog-slide-enter{
    opacity: 0;
    margin-top: -40px;
  }
</style>
